<template>
  <div v-loading="isLoading"
       class="container">
    <el-card>
      <template #header>
        <el-form ref="searchForm"
                 inline>
          <el-form-item label="活动类型"
                        prop="news_type">
            <el-select v-model="builingForm.activity_type_id"
                       placeholder="请选择活动类型">
              <el-option label="全部"
                         value="" />
              <el-option v-for="(oVal, oIdx) of type"
                         :key="oIdx"
                         v-bind="oVal" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="getList()">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="table_tool">
          <el-button type="primary"
                     icon="el-icon-plus"
                     @click="showAddOrEdit = true">新增</el-button>
        </div>
      </template>

      <el-table :data="tableData"
                border>
        <el-table-column prop="id"
                         label="id" />
        <el-table-column prop="title"
                         label="活动名称" />
        <el-table-column prop="sign_up_count"
                         label="报名人数" />
        <el-table-column prop="comment_count"
                         label="评论人数" />
        <el-table-column prop="create_time"
                         label="创建时间" />
        <el-table-column prop="qr_img"
                         label="签到二维码">
          <template slot-scope="{ row }">
            <el-image v-if="!row.finished"
                      style="width: 150px; height: auto"
                      :src="row.qr_img"
                      :preview-src-list="[row.qr_img]" />
            <div v-else>活动结束，二维码已失效</div>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         width="120px"
                         align="center">
          <template slot-scope="{ row }">
            <el-button type="text"
                       @click="EditCommunity(row.id)">编辑</el-button>
            <el-button type="text"
                       class="red"
                       @click="delCommunityById(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <footer class="footer">
      <el-pagination background
                     layout="total, sizes, pager, jumper"
                     :current-page="searchForm.page"
                     :page-sizes="[10, 20, 30, 50, 100]"
                     :page-size="searchForm.per_page"
                     :total="tableTotal"
                     @size-change="changeSize"
                     @current-change="changeCurrent" />
    </footer>

    <el-dialog :title="(builingForm.$id ? '编辑' : '新增') + '社区活动'"
               :visible.sync="showAddOrEdit"
               width="1000px"
               @closed="resetForm()">
      <el-form ref="builingForm"
               :model="builingForm"
               label-width="7em">
        <el-form-item prop="$id"
                      hidden />
        <el-form-item label="活动标题"
                      prop="title">
          <el-input v-model="builingForm.title"
                    placeholder="请输入活动标题" />
        </el-form-item>
        <el-form-item class="span-2"
                      label="主办方名称"
                      prop="organizer">
          <el-input v-model="builingForm.organizer"
                    placeholder="请输入主办方名称" />
        </el-form-item>
        <el-form-item class="span-2"
                      label="活动地址"
                      prop="organizer_addr">
          <el-input v-model="builingForm.organizer_addr"
                    placeholder="请输入活动地址" />
        </el-form-item>
        <el-form-item class="span-2"
                      label="报名上限"
                      prop="sign_up_max">
          <el-input v-model.number="builingForm.sign_up_max"
                    placeholder="请输入允许报名人数" />
        </el-form-item>
        <el-form-item class="span-2"
                      label="活动类型"
                      prop="news_type">
          <el-select v-model="builingForm.activity_type_id"
                     placeholder="请选择活动类型">
            <el-option v-for="(oVal, oIdx) of type"
                       :key="oIdx"
                       v-bind="oVal" />
          </el-select>
        </el-form-item>
        <el-form-item class="span-2"
                      label="是否置顶"
                      prop="is_top">
          <el-switch v-model="builingForm.is_top" />
        </el-form-item>
        <el-form-item class="span-2"
                      label="是否开启评论"
                      prop="is_comment">
          <el-switch v-model="builingForm.is_comment" />
        </el-form-item>
        <el-form-item label="是否审核评论"
                      prop="comment_check">
          <el-switch v-model="builingForm.comment_check" />
        </el-form-item>
        <el-form-item class="span-2"
                      label="是否开启报名"
                      prop="is_sign_up">
          <el-switch v-model="builingForm.is_sign_up" />
        </el-form-item>
        <el-form-item v-if="builingForm.is_sign_up"
                      class="span-2"
                      label="报名积分"
                      prop="sign_in_score">
          <el-input v-model="builingForm.sign_up_score"
                    placeholder="请输入报名积分" />
        </el-form-item>
        <el-form-item v-if="builingForm.is_sign_up"
                      class="span-2"
                      label="报名开始时间"
                      prop="sign_up_start_time">
          <el-date-picker v-model="builingForm.sign_up_start_time"
                          type="datetime"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd HH:mm:ss" />
        </el-form-item>
        <el-form-item v-if="builingForm.is_sign_up"
                      class="span-2"
                      label="报名结束时间"
                      prop="sign_up_end_time">
          <el-date-picker v-model="builingForm.sign_up_end_time"
                          type="datetime"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd HH:mm:ss" />
        </el-form-item>

        <el-form-item class="span-2"
                      label="是否开启签到"
                      prop="is_sign_in">
          <el-switch v-model="builingForm.is_sign_in" />
        </el-form-item>
        <el-form-item v-if="builingForm.is_sign_in"
                      class="span-2"
                      label="签到积分"
                      prop="sign_in_score">
          <el-input v-model="builingForm.sign_in_score"
                    placeholder="请输入活动地址" />
        </el-form-item>

        <el-form-item class="span-2"
                      label="是否开启签退"
                      prop="is_sign_in">
          <el-switch v-model="builingForm.is_sign_in" />
        </el-form-item>
        <el-form-item v-if="builingForm.is_sign_in"
                      class="span-2"
                      label="签退积分"
                      prop="sign_in_score">
          <el-input v-model="builingForm.sign_out_score"
                    placeholder="请输入签退积分" />

        </el-form-item>

        <el-form-item label="活动主办方获得积分"
                      prop="createActScore">
          <el-input v-model="builingForm.createActScore"
                    placeholder="请输入积分值" />
        </el-form-item>

        <el-form-item class="span-2"
                      label="活动开始时间"
                      prop="start_time">
          <el-date-picker v-model="builingForm.start_time"
                          type="datetime"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd HH:mm:ss" />
        </el-form-item>
        <el-form-item class="span-2"
                      label="活动结束时间"
                      prop="end_time">
          <el-date-picker v-model="builingForm.end_time"
                          type="datetime"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd HH:mm:ss" />
        </el-form-item>

        <el-form-item label="图片"
                      prop="thumbnail">
          <Upload v-model="builingForm.banner"
                  :file.sync="builingForm.banner" />
        </el-form-item>

        <tinymce v-model="builingForm.content"
                 height="300" />
      </el-form>
      <template #footer>
        <el-button type="primary"
                   :loading="loading.update"
                   @click="addCommunity()">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import API from '@/api'
import dayjs from '@/utils/dayjs'
import { table, addOrEdit } from '@/utils/mixins'
import Tinymce from '@/components/Tinymce'
import Upload from '@/components/Upload/SingleImage.vue'
import QRcode from '@/components/QRcode.vue'

export default {

  components: {
    Tinymce,
    Upload,
    QRcode
  },
  mixins: [table, addOrEdit],

  data: () => ({
    showAddOrEdit: false,
    isLoading: true,
    tableData: [],
    tableTotal: 0,
    isKey: false,
    searchForm: {
      page: 1, // 当前页码
      per_page: 10 // 每页条数
    },
    builingForm: {
      title: '',
      organizer: '',
      organizer_addr: '',
      sign_up_max: 100, // 最大报名人数
      is_top: false, // 是否置顶
      is_comment: true, // 是否开启评论
      comment_check: false, // 是否需要审核评论
      is_sign_up: true, // 是否开启活动报名
      sign_up_start_time: '', // 报名开始时间
      sign_up_end_time: '', // 报名结束时间
      is_sign_in: true, // 是否开启签到
      sign_up_score: 0, // 报名积分
      start_time: '', // 活动时间
      end_time: '', // 结束时间
      banner: '', // 缩略图
      sign_in_score: 0, // 签到积分
      sign_out_score: 0, // 签退积分
      activity_type_id: '',
      content: '',
      createActScore: '' // 主办方获得积分
    },
    type: []
  }),

  created () {
    API.getCommunityActType()
      .then(({ data }) => {
        const type = data.map(item => {
          return { label: item.name, value: item.id }
        })
        this.type = type
        this.builingForm.activity_type_id = type[0].value
        this.getList()
      }).catch((err) => {
      }).finally(() => {
      })
  },

  methods: {
    // 获取列表
    getList () {
      this.isLoading = true
      const id = this.builingForm.activity_type_id
      API.getCommunityActList(id, this.searchForm)
        .then(({ data }) => {
          const consultList = data.items.map(item => {
            return {
              id: item.id,
              title: item.title,
              qr_img: item.qr_img,
              finished: dayjs().subtract(1, 'hour').isAfter(item.end_time),
              sign_up_count: item.activity_sign_up.length,
              comment_count: item.activity_comments.length,
              create_time: item.create_time
            }
          })
          this.tableData = consultList
          this.tableTotal = data.total
        }).catch((err) => {
          this.tableData = []
          this.tableTotal = 0
        }).finally(() => {
          this.isLoading = false
        })
    },

    // 分页
    changeSize (val) {
      this.searchForm.per_page = val
      this.searchForm.page = 1
      this.getList()
    },

    // 分页
    changeCurrent (val) {
      this.searchForm.page = val
      this.getList()
    },

    // 编辑活动
    EditCommunity (id) {
      this.builingForm.$id = id
      API.getCommunityDetail(id)
        .then(({ data }) => {
          this.builingForm.title = data.title
          this.builingForm.organizer = data.organizer
          this.builingForm.organizer_addr = data.organizer_addr
          this.builingForm.sign_up_max = data.sign_up_max// 最大报名人数
          this.builingForm.is_top = data.is_top// 是否置顶
          this.builingForm.is_comment = data.is_comment// 是否开启评论
          this.builingForm.comment_check = data.comment_check// 是否需要审核评论
          this.builingForm.is_sign_up = data.is_sign_up// 是否开启活动报名
          this.builingForm.sign_up_start_time = data.sign_up_start_time // 报名开始时间
          this.builingForm.sign_up_end_time = data.sign_up_end_time// 报名结束时间
          this.builingForm.is_sign_in = data.is_sign_in// 是否开启签到
          this.builingForm.sign_up_score = data.sign_up_score// 报名积分
          this.builingForm.start_time = data.start_time// 活动时间
          this.builingForm.end_time = data.end_time// 结束时间
          this.builingForm.banner = data.banner// 缩略图
          this.builingForm.sign_in_score = data.sign_in_score// 签到积分
          this.builingForm.sign_out_score = data.sign_out_score// 签退积分
          this.builingForm.activity_type_id = data.activity_type_id
          this.builingForm.content = data.content
        }).catch((err) => {
        }).finally(() => {
          this.showAddOrEdit = true
        })
    },

    // 删除活动
    delCommunityById (id) {
      const _that = this
      this.$confirm(`是否删除改条数据？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          API.delCommunityAct(id)
            .then(({ data }) => {
              this.$message.success('删除成功！')
            }).catch((err) => {
            }).finally(() => {
              _that.getList()
            })
        })
        .catch(() => {
        })
    },

    // 创建活动
    addCommunity () {
      if (!this.builingForm.title.trim()) return this.$message.error('标题不可为空~~')
      if (!this.builingForm.organizer.trim()) return this.$message.error('主办方不可为空~~')
      if (!this.builingForm.organizer_addr.trim()) return this.$message.error('举办地不可为空~~')
      if (!this.builingForm.sign_up_start_time.trim()) return this.$message.error('报名开始时间不可为空~~')
      if (!this.builingForm.sign_up_end_time.trim()) return this.$message.error('报名结束时间不可为空~~')
      if (!this.builingForm.start_time.trim()) return this.$message.error('活动开始时间不可为空~~')
      if (!this.builingForm.end_time.trim()) return this.$message.error('活动结束不可为空~~')
      if (!this.builingForm.content.trim()) return this.$message.error('活动详情不可为空~~')

      const data = {
        title: this.builingForm.title,
        organizer: this.builingForm.organizer,
        organizer_addr: this.builingForm.organizer_addr,
        sign_up_max: this.builingForm.sign_up_max,
        is_top: this.builingForm.is_top,
        is_comment: this.builingForm.is_comment,
        comment_check: this.builingForm.comment_check,
        is_sign_up: this.builingForm.is_sign_up,
        sign_up_start_time: this.builingForm.sign_up_start_time,
        sign_up_end_time: this.builingForm.sign_up_end_time,
        is_sign_in: this.builingForm.is_sign_in,
        sign_up_score: this.builingForm.sign_up_score,
        start_time: this.builingForm.start_time,
        end_time: this.builingForm.end_time,
        banner: this.builingForm.banner,
        sign_in_score: this.builingForm.sign_in_score,
        sign_out_score: this.builingForm.sign_out_score,
        activity_type_id: this.builingForm.activity_type_id,
        content: this.builingForm.content
      }

      if (this.builingForm.$id) {
        const id = this.builingForm.$id
        API.editCommunityAct(id, data)
          .then(({ data }) => {
            this.$message.success('编辑成功！')
          }).catch((err) => {
          }).finally(() => {
            this.resetForm()
            this.getList()
          })
      } else {
        API.addCommunityAct(data)
          .then(({ data }) => {
            this.$message.success('编辑成功！')
          }).catch((err) => {
          }).finally(() => {
            this.resetForm()
            this.getList()
          })
      }
    },

    resetForm () {
      this.builingForm.title = ''
      this.builingForm.organizer = ''
      this.builingForm.organizer_addr = ''
      this.builingForm.sign_up_max = 30// 最大报名人数
      this.builingForm.is_top = false// 是否置顶
      this.builingForm.is_comment = true// 是否开启评论
      this.builingForm.comment_check = false// 是否需要审核评论
      this.builingForm.is_sign_up = true// 是否开启活动报名
      this.builingForm.sign_up_start_time = '', // 报名开始时间
        this.builingForm.sign_up_end_time = ''// 报名结束时间
      this.builingForm.is_sign_in = true// 是否开启签到
      this.builingForm.sign_up_score = 0// 报名积分
      this.builingForm.start_time = ''// 活动时间
      this.builingForm.end_time = ''// 结束时间
      this.builingForm.banner = ''// 缩略图
      this.builingForm.sign_in_score = 0// 签到积分
      this.builingForm.sign_out_score = 0// 签退积分
      this.builingForm.activity_type_id = 1
      this.builingForm.content = ''
      this.showAddOrEdit = false
    }

  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-message-box {
    min-width: 400px;
  }
  .el-dialog {
    margin-top: 2vh !important;
  }
  .el-input .el-input__inner {
    border-radius: 4px !important;
  }
  .el-switch {
    transform: translateY(6px);
  }
  .el-message-box__message {
    position: absolute !important;
    top: 50% !important;
    left: 40px !important;
  }
  .el-form-item__label {
    font-size: 16px !important;
  }
}
</style>
